import React, { Component } from 'react';

// const ChildA = () => <div>ChildA</div>

// export default class App extends Component {
//   render() {
//     return (
//       <>
//         <ChildA />
//         <ChildA />
//         <ChildA />
//       </>
//     )
//   }
// }

// 等效于的写法

// export default class App extends Component {
//   render() {
//     return (
//       <React.Fragment>
//         <ChildA />
//         <ChildA />
//         <ChildA />
//       </React.Fragment>
//     )
//   }
// }


// 区别在于 React.Fragment  可能具有key
function Golabel (props) {
    return (
        <dl>
            {props.items.map((item) => (
                // 如果没有`key`，React 会发出一个关键警告
                <React.Fragment key={item.id}>
                    <dt>{item.name}</dt>
                    <dd>{item.age}</dd>
                </React.Fragment>
            ))}
        </dl>
    );
}

export default class App extends Component {
    state = {
        list: [
            { id: 1, name: 'zs', age: 14 },
            { id: 2, name: 'ls', age: 15 },
        ]
    }
    render () {
        return (
            <>
                <Golabel items={this.state.list} />
            </>
        );
    }
}
